<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>

    <div th:include="common.html"></div>
    <link th:href="@{/css/main/style.css}" rel="stylesheet" type="text/css"/>
    <title>Title</title>
</head>
<body>
<div id="app" class="container-fluid">
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">功能组</button>
    <div id="demo" class="collapse">
        <button type="button" class="btn btn-primary btn-round btn-sm"  style="margin-top: 10px"
                @click="openAdd">
            <span class="glyphicon glyphicon-plus">添加</span>
        </button>

        <ul>
            <li><input type="text" class="form-control" style="width: 400px;height: 40px;margin-left: 400px" v-model="name" placeholder = '请输入角色名查询！'></li>
            <li><button class="btn btn-primary btn-round btn-sm" type="button" @click="selectData">
                <span class="glyphicon glyphicon-search">查询角色</span>
            </button></li></ul>
    </div>
    <a-table
            style="padding-top: 40px;margin: auto;width: 1000px"
            size="small"
            row-Key="id"
            :columns="columns"
            :data-source="dataSources"
            :pagination="pagination"
            :row-Selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :custom-Row="customRow"
            bordered
      >
         <span slot="action" slot-scope="record" style="width: 100px">
            <!--<a-button size="small" type="primary"  @click.stop="openShouQuan(record)">授权</a-button>-->
            <a-button size="small" type="primary"  @click.stop="openUpdate(record)">编辑</a-button>

             <a-button size="small" type="danger"  @click.stop="deleteData(record.id)">删除</a-button>
        </span>
    </a-table>


    <!--bootstrap的模态对话框-->
    <div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header bg-primary" style="background: #F45B4B;">
                <h4 class="text-white">职务添加</h4>
                <button type="button" class="close text-white" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
              <form role="form" id="userAddForm">
                <div class="form-group">
                    <label>职务名称</label>
                    <input type="text" name="name" id="name" class="form-control" v-model="name">
                </div>
                <div class="form-group">
                    <label>薪酬</label>
                    <textarea type="text" name="salary" id="salary" class="form-control" v-model="salary"></textarea>
                </div> <div class="form-group">
                    <label>备注</label>
                    <textarea type="text" name="salary" id="beizhu" class="form-control" v-model="beizhu"></textarea>
                </div>
            </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary"  @click="operate()" >提交</button>
            </div>
         </div>

      </div>

    </div>

    <!--<div id="shouQuanModal" class="modal fade" role="dialog" aria-hidden="true">-->
        <!--<div class="modal-dialog">-->
            <!--<div class="modal-content">-->
                <!--<div class="modal-header bg-primary" >-->
                    <!--<h4 class="text-white">角色授权</h4>-->
                    <!--<button type="button" class="close text-white" data-dismiss="modal"-->
                            <!--aria-hidden="true">&times;</button>-->
                <!--</div>-->
                <!--<div class="modal-body">-->
                    <!--<form role="form" id="shouquanForm">-->
                        <!--<label >权限菜单：</label>-->
                        <!--<div >-->
                            <!--<template>-->
                                <!--<a-tree-select-->
                                        <!--id="tree"-->
                                        <!--v-model="menuids"-->
                                        <!--show-search-->
                                        <!--multiple-->
                                        <!--style="width: 100%"-->
                                        <!--tree-Node-Filter-Prop="title"-->
                                        <!--:dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"-->
                                        <!--placeholder="请选择"-->
                                        <!--:tree-data="treeData"-->
                                        <!--tree-data-simple-mode-->
                                        <!--allow-clear-->
                                        <!--tree-default-expand-all-->
                                        <!--@change="orgTreeChange"-->
                                <!--&gt;-->
                                <!--</a-tree-select>-->
                            <!--</template>-->
                        <!--</div>-->
                    <!--</form>-->
                <!--</div>-->
                <!--<div class="modal-footer">-->
                    <!--<button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>-->
                    <!--<button type="button" class="btn btn-primary"  @click="operate()" >提交</button>-->
                <!--</div>-->
            <!--</div>-->

        <!--</div>-->

    <!--</div>-->
<!--</div>-->
<script th:src="@{/myjs/post/main.js}"></script>
</body>
</html>
